<template>
    <div class="steps-wrapper">
        <!-- <div class="step">
      <div class="step-icon">1</div>
      <div class="step-label">1 test</div>
    </div>
    <div class="steps-line">
      <span class="line"></span>
    </div> -->
        <template
            v-for="(item,index) in steps"
            :key="index">
            <div class="step" >
                <div
                    class="step-icon"
                    :style="{...iconStyle(item.value)}">{{index+1}}</div>
                <div
                    class="step-label"
                    :style="{...labelStyle(item.value)}">{{item.label}}</div>
            </div>
            <div
                class="steps-line"
                v-if="index!=lastIndex"
                :style="{...stepsLineStyle()}">
                <span
                    class="line"
                    :style="{height:`${lineSize}px`, ...lineStyle(item.value)}"></span>
            </div>
        </template>

    </div>
</template>

<script lang="js">
import { reactive, toRefs, computed } from 'vue';
export default {

    name: '',
    components: {},
    props: {
        iconSize: {
            type: Number,
            default: 20

        },
        labelSize: {
            type: Number,
            default: 10
        },
        lineSize: {
            type: Number,
            default: 2
        },
        activeIndex: {
            type: Number,
            default: 2
        },
        steps: {
            type: Array,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: [
                {
                    value: 1,
                    label: 'step 1'
                },
                {
                    value: 2,
                    label: 'step 2'
                },
                {
                    value: 3,
                    label: 'step 3'
                },
                {
                    value: 4,
                    label: 'step 4'
                }
            ]
        }

    },
    setup (props, context) {
        const state = reactive({

        });
        const lastIndex = computed(() => {
            return props.steps.length - 1;
        });

        // step icon区域的样式
        const iconStyle = (index) => {
            const customStyle = {
                width: `${props.iconSize}px`,
                height: `${props.iconSize}px`,
                borderRadius: '50%',
                border: '1px solid #ffffff',
                opacity: 0.45,
                backgroundColor: 'transparent',
                lineHeight: `${props.iconSize}px`

            };
            if (index <= props.activeIndex) {
                const activeStyle = {
                    backgroundColor: '#61CFBE',
                    border: '1px solid #61CFBE',
                    opacity: 1

                };
                Object.assign(customStyle, activeStyle);
            }

            return customStyle;
        };

        // step label区域的样式
        const labelStyle = (index) => {
            const customStyle = {
                lineHeight: `${(props.labelSize + Math.floor(props.labelSize / 20))}px`,
                fontSize: `${props.labelSize}px`,
                opacity: 0.45,
                color: '#ffffff'
            };

            if (index <= props.activeIndex) {
                const activeStyle = {
                    opacity: 1,
                    color: '#ffffff'

                };
                Object.assign(customStyle, activeStyle);
            }
            return customStyle;
        };

        // stepsline区域的样式
        const stepsLineStyle = () => {
            const customStyle = {
                width: `${props.iconSize}px`,
                height: `${props.iconSize}px`
            };
            return customStyle;
        };

        const lineStyle = (index) => {
            if (index < props.activeIndex) {
                return {
                    backgroundColor: '#61CFBE',
                    opacity: 1
                };
            } else {
                return {
                    backgroundColor: '#ffffff',
                    opacity: 0.45

                };
            }
        };

        return {
            lineStyle,
            lastIndex,
            stepsLineStyle,
            labelStyle,
            iconStyle,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.steps-wrapper {
  display: flex;
  align-items: flex-start;

  font-size: 13px;
}
.steps-line {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0px 5px 0px 5px;
  justify-content: space-between;
}
.steps-line span {
  height: 3px;
  background-color:#61CFBE;
  flex-grow: 1;

}

.step-icon {
   margin: 0 auto;
 text-align: center;/*让文字水平居中*/
 color: #ffffff;

}
.step-label{
    margin-top: 8px;

}
</style>
